<template>
  <div class="page">
    <myHeader class="my-header"></myHeader>


    <div class="container">
      <div class="plate1">
        <div class="plate1-left plate1-left1">
          <div class="plate1-title">牛樟芝</div>


          <div>
            <img style="width: 100%;" src="../assets/niulz.png" alt="">
          </div>

          <div class="plate1-left-content">
            牛樟芝被譽為「神明菇」,僅生長在臺灣中海拔山區,是臺灣獨有的藥用真菌,臺灣原住民族歷代生活在山林中,偶爾找到一種金紅色菇菌,其生長在陰暗潮濕樹心的枯倒木中,食用此菇菌或飲用其熬煮的湯液後,竟能補充體能、減輕病痛,一些喜愛喝酒的原住民食用後,酒後症狀也減輕許多,故發現「神明菇」能解百毒和宿醉的奇效,慢慢成為原住民家家戶戶必備的祖傳秘方,這就是為後世所認知的牛樟芝。
            牛樟芝的特點在於其金紅色的外形,其生長在臺灣特有的牛樟樹內部且具有宿主專一性,因特殊的寄生關係得其名,當地視其為一種神聖的存在,在民間一直有「森林紅寶石」之稱。牛樟芝擁有提升免疫力、調整體質的功效,超過400篇SCI國際性期刊科研顯示牛樟芝含有豐富的生物活性成分,包括三萜類、多醣體、腺苷、超氧化物歧化酶(SOD)等,這些成分對人體健康具有積極的影響。在傳統醫學中,牛樟芝被視為滋補良藥,用於調理身體機能、增強體力。
          </div>

        </div>
        <div class="plate1-right plate1-right1">




          <div class="gongxiao">牛樟芝納米滴丸</div>
          <div class="plate1-right-content">
            在納米技術上取得重大突破,嚴選臺灣野生牛樟芝,利用生物科技專利超臨界技術進行萃取,有效成分遠超市面上的同類型產品,經過特殊濃縮制程處理後,其活性成分超過200多種,能有效養護肝臟、解除宿醉、維持心血管健康、強化免疫系統、延緩衰老。
          </div>


          <div class="gongxiao">高效吸收·長效維持·高利用率</div>
          <div class="plate1-right-content">
            滴丸具有速效、生物利用度高、不破壞、高純度、高濃縮、長效等優勢,滴丸路徑是經由舌下黏膜直接作用,優點在於其有效成分可藉由黏膜直接滲透到微血管,最大程度保留有效成分,完整吸收,同時也加速了將成分帶到身體各處的時間。
          </div>


          <div class="gongxiao">護肝解酒,肝臟防護</div>
          <div class="plate1-right-content">
            牛樟芝對肝損傷的保護作用,能有效降低酒精性肝臟損傷,抑制肝纖維化,減少化學性肝損傷及急性肝損傷,從而達到防護肝臟,快速解酒等功能。
          </div>


          <div class="gongxiao">降三高,保護心血管</div>
          <div class="plate1-right-content">
            牛樟芝能調控內皮細胞一氧化碳 NO 的釋放,牛樟芝中三萜類化合物能有效降低血漿當中三酸甘油脂和血糖濃度,達到降血脂、降血糖效果。
          </div>


          <div class="gongxiao">抗氧化,延緩衰老</div>
          <div class="plate1-right-content">
            自由基會破壞身體健康細胞,如果身體有過多的自由基,會讓身體加速老化,因此「抗氧化」尤為重要。牛樟芝中的多醣和酚類化合物,具有強大的抗氧化作用,能夠清除體內的自由基,抑制過氧化反應,減少氧化損傷對細胞的影響。
          </div>

          <div class="gongxiao">增強免疫調節,降低細胞病變風險,降低癌症</div>
          <div class="plate1-right-content">
            多項研究表明,三萜類化合物可抑制細胞變異,與多醣體相互作用能有效抗腫瘤。同時,多醣體能活化T細胞、B細胞、巨噬細胞、NK細胞等免疫細胞,大幅增強人體自身的免疫系統,大量文獻證實有助緩解腫瘤癌症患者放療、化療所產生的不良反應,降低腫瘤患者復發、擴散等風險。
          </div>


          <div class="gongxiao">主要功效</div>
          <div class="plate1-right-content">
            1.養護肝臟,解酒解宿醉<br>
            2.排解毒素,增強肝臟機能
            3.對抗三高,保護心血管
            4.滋補養身,固本培元
            5.增強免疫,調整體質
            6.抑制癌細胞增殖
          </div>


          <div class="gongxiao">適用人群</div>
          <div class="plate1-right-content">
            1.經常加班、喝酒應酬,生活作息不正常人士。
            2.飲食不規律,無法攝取均衡營養人士。
            3.關注生理機能,維持健康人士。
            4.年紀漸增,擔心身體防禦下降人士。
            5.經常熬夜、容易疲憊、精神不濟人士。
            6.煙酒過量、肝功能受損人士。
            7.體弱多病或大病初癒人士。
            8.患有三高及心臟病人士。
          </div>


          <div class="gongxiao">服用方法</div>
          <div class="plate1-right-content">
            養生保健 每日1次,每次5-10粒。
            特別調養 每日2次,每次5-10粒,早、晚各1次。
            *餐前餐後均可含服,舌下黏膜直接吸收,成分完整不破壞。
          </div>


        </div>
      </div>
    </div>


    <myFooter></myFooter>
  </div>


</template>

<script>
import myFooter from '../components/myFooter.vue';
import myHeader from '../components/myHeader.vue';


export default {
  name: 'HomePage',
  components: {
    myFooter,
    myHeader
  },
  data() {
    return {
      currentCls: 0,
      totalNum: 0,
      pageSize: 6,
      pageIndex: 1,
      classify: [
        { name: '所有产品' },
        { name: '高端功效型' },
        { name: '母婴莉莉斯' },
        { name: '日销爆款' },
        { name: '香港濟風堂' }
      ],
      list: [],
    }
  },
  async mounted() {
    let params = {
      searchStr: '',
      category: null,
      pageSize: this.pageSize,
      pageIndex: this.pageIndex
    }
    this.getData(params);

  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },

    async getData(params) {
      try {
        let res = await this.$api.productList(params);
        this.list = res.data.data;
        this.totalNum = res.data.totalNum;
        console.log(this.list)
      } catch (err) {
        console.log(err)
      }
    },


    currentChange(index) {
      // console.log(e);
      this.currentCls = index;

      let params = {
        searchStr: '',
        category: this.currentCls,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }
      this.getData(params);

    },

    pageChange(e) {
      console.log(e);
      let params = {
        searchStr: '',
        category: null,
        pageSize: this.pageSize,
        pageIndex: e
      }
      this.getData(params);
    }
  }
}
</script>

<style lang="less" scoped>
/* 定义动画 */
@keyframes moveright {
  0% {
    transform: translateX(-2);
  }

  50% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(-2px);
  }
}

.page {
  .container {
    padding-top: 115px;
    width: 100%;
    margin: 0 auto;

    .model-1 {
      padding-top: 50px;
      display: flex;
      justify-content: space-between;

      .p-left {
        width: 269px;

        .p-left-title {
          font-size: 30px;
          margin-bottom: 20px;
        }

        .p-left-item {
          width: 269px;
          background-color: #1a7567;
          height: 50px;
          line-height: 50px;
          color: white;
          display: flex;
          padding: 0 10px;
          justify-content: space-between;
          margin-bottom: 5px;
          border-radius: 10px;

          .current-icon {
            animation: moveright 1s infinite;
          }
        }

        .currentCls {
          background-color: #07483e;
          width: 272px;
          height: 54px;
          line-height: 54px;
        }
      }

      .p-pagin {
        margin: 10px;
      }

      .p-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 30px 30px 30px;

        // &::after {
        //     content: '';
        //     flex: auto;
        // }

        .p-item {
          // height: 484px;
          background: white;
          margin: 10px;
          padding: 10px;
          font-size: 18px;
          box-shadow: 0px 0px 10px #b0b0b0;
          border-radius: 5px;

          .p-item-yj {
            text-decoration: line-through;
          }

          .p-item-xj {
            font-weight: 700;
            margin-left: 10px;
          }

          .p-item-title {
            overflow: hidden;
            height: 28px;
            width: 232px;
          }


          .p-item-img {
            width: 232px;
            height: 232px;
          }

        }
      }
    }
  }
}


.banner-box {
  text-align: center;
  background-color: #e9e9eb;
  margin-top: 105px;

  .banner {
    width: 100%;
    display: block;
  }
}

.video-box {
  padding: 20px 10vw 0 10vw;

  .publicity-video {
    width: 100%;
  }
}


.plate1-1 {
  border-bottom: 1px solid #ddd;
}

.plate1-2 {
  border-bottom: 1px solid #ddd;
}

.plate1-3 {
  border-bottom: 1px solid #ddd;
}

.plate1-4 {
  border-bottom: 1px solid #ddd;
}

.plate1-5 {
  border-bottom: 1px solid #ddd;
}

.plate1-6 {
  border-bottom: 1px solid #ddd;
}

.plate1 {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;

  .plate1-left {
    width: 37.6%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-left-content {
      font-size: 13px;
    }
  }

  .plate1-left1 {
    width: 48%;
  }



  .plate1-right {
    width: 57.2%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-right-content {
      font-size: 13px;
    }

    .plate1-right-mid {
      display: flex;
      justify-content: space-around;
      font-size: 16px;


      .plate1-right-mid-cell {
        text-align: center;

        .iconfont {
          font-size: 36px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }


    }

    .plate1-right-foot {
      .p-list {
        display: flex;

        .p-item {
          text-align: center;

          .p-item-img {
            width: 200px;
          }
        }
      }
    }

  }


  .plate1-right1 {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .plate1 {
    width: 1170px;
    margin: 0 auto;
  }
}





.honor {
  .honoe-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    padding: 20px 0;
  }

  .honor-box {
    margin: 10px 0;
    display: flex;
    padding: 0 10vw;
    justify-content: space-around;
    flex-wrap: wrap;

    .cer-img {
      width: 117px;
      height: auto;
    }
  }

}



.back-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
  background-color: black;
  color: white;
}

@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }

  .plate1 {
    display: block;
    padding-top: 30px;

    .plate1-left {
      width: 100%;
      padding: 10px 5% 0 5%
    }

    .plate1-right {
      width: 100%;
      padding: 10px 5% 0 5%;

      // .plate1-right-content {
      //   font-size: 13px;
      //   color: red;
      // }

      .plate1-right-foot {
        .p-list {
          display: flex;

          .p-item {
            text-align: center;

            .p-item-img {
              width: 100px !important;
            }
          }
        }
      }
    }
  }

  .video-box {
    padding: 5px 0vw 0 0vw;

    .publicity-video {
      width: 100%;
    }
  }


  .honor {
    .honoe-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      padding: 20px 0;
    }

    .honor-box {
      margin: 10px 0;
      display: flex;
      padding: 0 10vw;
      justify-content: space-around;
      flex-wrap: wrap;

      .cer-img {
        width: 90px;
        height: auto;
      }
    }

  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .p-item-img {
    width: 90vw !important;
    height: auto !important;
  }

  .footer {
    height: 138px;
  }
}







@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;

    .p-item {
      background: white;
      margin: 5px;
      padding: 10px;
      font-size: 18px;

      // width: 45vw !important;
      // height: auto !important;

      .p-item-yj {
        text-decoration: line-through;
      }

      .p-item-xj {
        font-weight: 700;
        margin-left: 10px;
      }

      .p-item-title {
        overflow: hidden;
        font-size: 14px;
        width: 40vw !important;
        height: auto !important;
      }


      .p-item-img {
        width: 150px !important;
        height: 150px !important;
      }

    }
  }

  .footer {
    height: 138px;
  }
}
</style>